<template>
  <div class="app-container  bg-gray">
    <el-card class="box-1">
      <div slot="header"><span>关于我们</span></div>
      <el-form ref="form" :model="form" label-width="160px">
        <el-form-item label="编辑">
          <ws-editor v-model="form['content']"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        content: ''
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      const url = 'article/list'
      const data = {
        typeid: 4
      }
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        const url = 'article/detail/' + res.data.rows[0].id
        this.$store.dispatch('GetConnect', { url }).then(res2 => {
          this.form = res2.data
        })
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = this.form
          data.typeid = 4
          const url = 'article/edit/' + this.form.id
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg)
          }).catch((err) => {
            this.$message.error(err.msg)
          })
        } else {
          this.$message.error('提交失败,请检查必填项')
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../styles/index.scss';
  .box-1 {
    max-width: 1000px;
    margin: 0 auto;
    > div span {
      font-size: 18px;
      font-weight: 600;
      padding: 0 10px;
    }
    .el-form {
      max-width: 900px;
      .title {
        font-weight: 600;
      }
      .remark {
        font-size: 13px;
        color: $textGray;
      }
      .el-button {
        @extend .bg-green;
        width: 20%;
        min-width: 160px;
      }
    }
  }
</style>
